<style>
  .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }
  .file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
  }
</style>

<template>
  <div>
    <el-button type="primary" @click="getLists()">批量添加</el-button>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="批量添加" width="900px">
      <!--<input-->
      <!--ref="upload"-->
      <!--type="file"-->
      <!--accept=".xls,.xlsx"-->
      <!--class="file"-->
      <!--style="margin-bottom: 15px"-->
      <!--@change="readExcel"-->
      <!--&gt;-->
      <div style="margin-bottom: 10px; display: flex;  ">
        <a class="file" style="margin-right: 10px">选择文件
          <input
            ref="upload"
            type="file"
            accept=".xls,.xlsx"
            class="file"
            style="margin-bottom: 15px"
            @change="readExcel"
          >
        </a>
        <el-popover
          ref="popover1"
          placement="top-start"
          html="true"
          width="200"
          trigger="hover">
          <img src="../img/example.png">
        </el-popover>
        <el-button v-popover:popover1 class="file">表格示例</el-button>
      </div>
      <!--<template>-->
      <!--<div>-->
      <!--<el-table :data="outputs" style="width: 100%;">-->
      <!--<el-table-column prop="content" label="语录" width="180">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ outputs.content }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column prop="classify" label="语录分类" width="180">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ outputs.classify }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <!--</div>-->
      <!--</template>-->
      <!--<el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitForm()">搜索</el-button>-->
      <el-table v-loading="listLoading" :key="tableKey" :data="outputs" border fit highlight-current-row height="450" style="width: 100%;">
        <el-table-column label="语录分类" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.classify }}</span>
          </template>
        </el-table-column>
        <el-table-column label="语录记录" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitForm()">确认</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="close()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { excel_add } from '@/api/poster/ana'
import store from '@/store'
import XLSX from 'xlsx'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  data() {
    return {
      listLoading: false,
      tableKey: 0,
      outputs: [],
      dialogTableVisible: false,
      row_data: {
        status: 1
      }
    }
  },
  beforeMount() {
    this.classify_list = this.classifyList
  },
  created() {
  },
  methods: {
    readExcel(e) {
      this.listLoading = true
      const that = this
      const files = e.target.files
      if (files.length < 1) {
        this.listLoading = false
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$toast('上传文件格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          }) // 读取数据
          const wsname = workbook.SheetNames[0] // 取第一张表
          console.log(wsname)
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
          // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
          // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
          // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表（具有值回退）
          // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本

          that.outputs = [] // 清空接收数据

          for (let i = 0; i < ws.length; i++) {
            if (ws[i].hasOwnProperty('语录内容') && ws[i].hasOwnProperty('语录分类')) {
              var content = ws[i]['语录内容']
              var classify = ws[i]['语录分类']
              that.outputs.push({ classify: classify, content: content })
            }
          }
          console.log('ws', ws)
          console.log('that.outputs', that.outputs)
          this.outputs = that.outputs
          console.log('that.outputs1111111111111111111111', this.outputs)
          this.$refs.upload.value = ''
        } catch (e) {
          console.log(e)
          return false
        }
        this.listLoading = false
      }
      fileReader.readAsBinaryString(files[0])
    },
    getLists() {
      this.dialogTableVisible = true
    },
    submitForm() {
      const data = this.outputs
      excel_add(store.getters.token, { data: data }).then(res => {
        if (res.data.status) {
          this.$message.success('添加成功！')
          this.$emit('getLists')
          this.close()
        } else {
          this.$message.error(res.outputs.msg)
        }
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>

